<!--
定位+三角：实现梯形
-->
<style>
    .price {
        width: 150px;
        height: 30px;
        margin: 100px auto;
        border: 1px solid red;
        text-align: center;
        line-height: 30px;
    }
    .new {
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
        background-color: red;
        color: white;
        font-weight: 700;
    }
    .old {
        color: #979995;
        font-size: 12px;
        text-decoration: line-through;
    }
    .triangle {
        position: absolute;
        top: 0;
        right: 0;

        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;

        border-top: 30px solid transparent;
        border-right: 10px solid white;
    }
</style>


<div class="price">
    <span class="new">
        ￥1999
        <div class="triangle"></div>
    </span>
    <span class="old">￥5000</span>
</div>